<template>
  <div>
    <van-nav-bar
      title="商品列表"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-dropdown-menu>
      <van-dropdown-item
        v-model="value"
        :options="option"
        @change="changeFn(value)"
      />
      <van-dropdown-item
        v-model="value2"
        :options="option2"
        @change="changeFns(value2)"
      />
    </van-dropdown-menu>
    <goodItem :goodList="chuanshulist"></goodItem>
    <layoutView></layoutView>
  </div>
</template>

<script>
import goodItem from "@/components/goodItem.vue";
import layoutView from "@/views/layout/LayoutView.vue";
import { goodsApi } from "@/api/home";
export default {
  data() {
    return {
      goodList: [], //请求的
      morenList: [], //默认
      heightList: [], //高
      minList: [], //小
      chuanshulist: [],
      token: "595fe950-7ebd-11ed-aa1f-dd279271aa3a",
      value: 0,
      value2: "a",
      switch1: false,
      switch2: false,
      option: [
        { text: "默认", value: 0 },
        { text: "价格由高到低", value: 1 },
        { text: "价格由低到高", value: 2 },
      ],
      option2: [
        { text: "有货", value: "a" },
        { text: "直营", value: "b" },
      ],
    };
  },
  async created() {
    try {
      let { data } = await goodsApi(this.token);
      this.goodList = data.data.list;
    } catch (error) {
      console.log(error);
    }
    this.chuanshulist = JSON.parse(JSON.stringify(this.goodList));
  },
  components: {
    goodItem,
    layoutView,
  },
  methods: {
    onClickLeft() {
      this.$router.push({ path: "/home" });
    },
    changeFn(value) {
      //先存储一下 本来的数组

      let morenList = this.goodList;
      let heightList = this.chuanshulist;
      let minList = this.chuanshulist;
      if (value == "0") {
        console.log("默认");

        this.chuanshulist = morenList;
        console.log(this.chuanshulist);
      } else if (value == "1") {
        this.chuanshulist = heightList.sort((a, b) => {
          return b.price - a.price;
        });

        console.log("从高到低 ");
      } else {
        this.chuannshulist = minList.sort((a, b) => {
          return a.price - b.price;
        });
        console.log("从低到高");
        // console.log(this.goodList);
        // console.log(this.chuanshulist);
      }
    },
    changeFns(value2) {
      let youhuo = this.chuanshulist;
      let wuhu = this.chuanshulist;
      if (value2 == "a") {
        this.chuanshulist = youhuo.sort((a, b) => {
          return b.isHave - a.isHave;
        });
      } else {
        this.chuanshulist = wuhu.sort((a, b) => {
          return b.isDirect - a.isDirect;
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-nav-bar__content {
  height: 3rem;
}
/deep/ .van-nav-bar__title {
  font-size: 1rem;
}
/deep/ .van-nav-bar {
  line-height: 10rem;
}
/deep/ .van-dropdown-menu__bar {
  height: 2rem;
}
/deep/ .van-dropdown-menu__title {
  font-size: 1rem;
  line-height: 1rem;
}
</style>
